<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="refresh_ref"
        :model="query_info"
        :rules="refresh_rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="商品名称" prop="key">
              <el-input
                placeholder="请输入商品名称"
                maxlength="50"
                clearable
                show-word-limit
                v-model="query_info.product_name"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收货人名称" prop="product_name">
              <el-input
                placeholder="请输入收货人名称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.key"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收件人手机" prop="user_phone">
              <el-input
                placeholder="请输入收件人手机"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.user_phone"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单号" prop="user_phone">
              <el-input
                placeholder="请输入订单号"
                maxlength="100"
                clearable
                show-word-limit
                v-model="query_info.order_no"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="发货时间" prop="delivery_time">
              <el-date-picker
                v-model="query_info.delivery_time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="outTab()">导出数据</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border id="out-table">
        <el-table-column
          align="center"
          label="编号"
          prop="id"
          width="80"
          fixed="left"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品名称"
          prop="product_to.name"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="规格"
          prop="specs"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          label="数量"
          prop="num"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收货人名称"
          prop="order_to.user_name"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收件人手机"
          prop="order_to.user_phone"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收件人地址"
          prop="order_to.user_address"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="发货时间"
          prop="order_to.delivery_time"
          width="200"
          sortable
        ></el-table-column>

        <el-table-column
          align="center"
          label="备注"
          prop="order_to.comment"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单号"
          prop="order_to.order_no"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="单价"
          prop="money"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="邮费"
          prop="postage"
          width="100"
          sortable
        ></el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination
        @size-change="handle_size_change"
        @current-change="handle_current_change"
        :total="total"
        :layout="$config.layout"
        :current-page="query_info.page"
        :page-sizes="$config.page_sizes"
        :page-size="query_info.pagesize"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query_info: {
        key: "", // 收货人名称
        user_phone: "", // 收件人手机
        product_name: "", // 商品名称
        order_no: "", // 订单号
        delivery_time: [], // 发货时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize // 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: {
        key: [],
        product_name: [],
        user_phone: [],
        order_no: [],
        delivery_time: []
      }
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 获取列表
    get_list() {
      this.$base.request(
        {
          that: this,
          url: "shop/shipped_order/index",
          data: this.query_info
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    // 刷新
    refresh() {
      this.$refs.refresh_ref.resetFields();
      this.get_list();
    },
    // 当前每页多少条选择
    handle_size_change(pagesize) {
      this.query_info.pagesize = pagesize;
      this.get_list();
    },
    // 当前页码
    handle_current_change(page) {
      this.query_info.page = page;
      this.get_list();
    },
    outTab() {
      /* generate workbook object from table */
      const fix = document.querySelector(".el-table__fixed");
      let wb;
      if (fix) {
        wb = this.$XLSX.utils.table_to_book(
          document.querySelector("#out-table").removeChild(fix)
        );
        document.querySelector("#out-table").appendChild(fix);
      } else {
        wb = this.$XLSX.utils.table_to_book(
          document.querySelector("#out-table")
        );
      }
      /* get binary string as output */
      const wbout = this.$XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });

      try {
        this.$FileSaver.saveAs(
          new Blob([wbout], {
            type: "application/octet-stream"
          }),
          "已发货订单.xlsx"
        );
      } catch (e) {
        // if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout;
    }
  }
};
</script>
